<template>
	<view>
		<tt-bar leftIcon="icon-back" title="发起协商"></tt-bar>
		<view class="refuseBox">
			<!-- <view class="regionBox refuseReason" @tap="chooseReson">
				<text class="regionTitle">协商原因</text>
				<text class="refuseText">{{typeText}}</text>
				<text class="iconfont icon-right"></text>
			</view> -->
			<view class="regionBox refusePrice">
				<text class="regionTitle">协商金额：</text>
				<input type="number" placeholder="点击输入协商金额" v-model="amout" />
			</view>
			<view class="regionBox">
				<text class="regionTitle">协商说明</text>
				<view class="regionCnt">
					<textarea class="refuseDetail" placeholder="请填写协商说明" v-model="reason"></textarea>
					<!-- <text class="photoText">上传凭证</text>
					<view class="uploadBtn" v-if="selectImgList.length<1" @tap="selectImg">
						<text class="iconfont icon-xiangji"></text>
						<text class="">上传凭证，最多6张</text>
					</view>
					<view class="uploadImg" v-if="selectImgList.length>0">
						<view class="imgBox" v-for="(item,index) in selectImgList" :key="index" :data-idx="index">
							<text class="iconfont icon-guanbi1 deletBtn" @tap.stop="deleteImg" :data-idx="index"></text>
							<image :src="item" @tap="showImage"></image>
						</view>
						
						<view class="addImg imgBox" v-if="selectImgList.length<6" @tap="selectImg">
							<text class="iconfont icon-add"></text>
							<text class="">添加图片</text>
						</view>
					</view> -->
					
				</view>
			</view>
		</view>
		<view class="orderDtBtnGroup">
			<button @tap="pBack">取消返回</button>
			<button class="active" @tap="refuse">提交申请</button>
		</view>
		<w-picker
		    v-if="selectList.length!=0"
		    mode="selector" 
		    @confirm="onConfirm" 
		    ref="selector" 
		    themeColor="#f00"
		    :selectList="selectList"
		></w-picker>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,wPicker
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop,
			})
			
		},
		data() {
			return {
				orderId:'',
				refundId:'',
				selectImgList:[],
				selectList:[{
					label:'原因1',
					value:1
				},{
					label:'原因2',
					value:2
				},{
					label:'原因3',
					value:3
				},{
					label:'原因4',
					value:4
				}],
				reason:'',
				type:'',
				typeText:'请选择',
				amout:''
			};
		},
		methods:{
			selectImg(){
				let _this=this
				let _count=6-_this.selectImgList.length;
				uni.chooseImage({
				    count: _count, //默认9
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						if(_this.selectImgList.length>0){
							_this.selectImgList=_this.selectImgList.concat(res.tempFilePaths)
						}else{
							_this.selectImgList=res.tempFilePaths;
						}
				    }
				});
			},
			deleteImg(e){
				let _index=e.currentTarget.dataset.idx;
				this.selectImgList.splice(_index,1)
			},
			chooseReson(){
				this.$refs.selector.show()
			},
			onConfirm(e){
				console.log(e);
				this.type=e.checkArr.value
				this.typeText=e.checkArr.label
			},
			showImage() {
				let _this=this;
				uni.previewImage({
					urls: _this.selectImgList,
					indicator:"default"
				});
			},
			// 提交拒绝申请
			refuse(){
				let _this=this;
				if(!this.amout){
					uni.showToast({
						title: '请填写协商金额',
						icon: 'none'
					});
				}else{
					if(_this.selectImgList.length>0){
						let upArr=[];
						_this.selectImgList.forEach(function(x){
							upArr.push({uri:x,name:'file'})
						})

						API.uploadImg(upArr).then(res=>{
							let _postImg=[];
							res.forEach(function(item){
								_postImg.push({
									type:1,
									url:item
								})
							})
							API.refusalRefund({
								orderId:_this.orderId,
								operId:this.userInfo.userId,
								refundId:_this.refundId,
								status:4,
								amount:parseFloat(_this.amout),
								reason:_this.reason,
								resList:_postImg
							}).then(res=>{
								uni.showToast({
									title: '协商申请提交成功',
									icon: 'none'
								});
								uni.$emit("rfdtSX")
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},1500)
							})
						})
					}else{
						API.refusalRefund({
							orderId:_this.orderId,
							operId:this.userInfo.userId,
							refundId:_this.refundId,
							status:4,
							amount:parseFloat(_this.amout),
							reason:_this.reason
						}).then(res=>{
							uni.showToast({
								title: '协商申请提交成功',
								icon: 'none'
							});
							uni.$emit("rfdtSX")
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
							
						})
					}
				}
				
			}
		},
		onLoad(cfm) {
			this.orderId=parseInt(cfm.orderId) ;
			this.refundId=parseInt(cfm.refundId) ;
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.refuseBox {
		margin-top: 20upx;
		.refusePrice{
			flex-direction: row;
			align-items: baseline;
			padding: 50upx 32upx;
			input{
				font-size: 32upx;
			}
			.regionTitle {
				padding: 0;
			}
		}
		.refuseReason {
			flex-direction: row;
			align-items: baseline;
			padding: 50upx 32upx;

			.regionTitle {
				padding: 0;
			}

			.refuseText {
				font-size: 26rpx;
				color: #9e9d9d;
				flex-grow: 1;
				text-align: right;
			}

			.iconfont {
				font-size: 28upx;
				color: #9e9d9d;
			}
		}
	}

	.refuseDetail {
		width: 100%;
		height: 250upx;
		border-radius: 7rpx;
		border: solid 1rpx #cccccc;
		font-size: 28upx;
		padding: 10upx;
		box-sizing: border-box;
	}

	.photoText {
		display: inline-block;
		margin-top: 28upx;
		font-size: 28rpx;
		color: #ffa71d;
		margin-bottom: 10upx;
	}

	.uploadBtn {
		height: 175rpx;
		border-radius: 7rpx;
		border: dashed 3rpx #cccccc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 30upx;

		.iconfont {
			font-size: 60upx;
			color: #b2b2b2;
		}

		text {
			margin-top: 10upx;
			font-size: 25rpx;
			color: #b2b2b2;
		}
	}
	.uploadImg{
		display: flex;
		flex-wrap: wrap;
		
		.imgBox{
			width: 150upx;
			height: 150upx;
			border-radius: 10upx;
			overflow: hidden;
			position: relative;
			margin-right: 15upx;
			margin-bottom: 15upx;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
			.deletBtn{
				position: absolute;
				right: 0;
				top: 0;
				width: 36upx;
				height: 36upx;
				background-color: #e54d42;
				color: #FFFFFF;
				font-weight: bold;
				text-align: center;
				line-height: 38upx;
				font-size: 28upx;
				z-index: 9;
			}
		}
		.addImg{
			border: 1px solid #c6c6c6;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.iconfont{
				font-size: 40upx;
			}
			text{
				font-size: 25rpx;
				color: #b2b2b2;
			}
		}
		.imgBox:nth-child(4n){
			margin-right: 0;
		}
	}
	.orderDtBtnGroup {
		position: fixed;
		width: 100%;
		height: 132upx;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		z-index: 99;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 20upx;
		button {
			margin: 0;
			width: 206rpx;
			height: 64rpx;
			border-radius: 32upx;
			background-color: rgba(0,0,0,0);
			font-size: 34upx;
			line-height: 58upx;
			color: #767676;
			border: 3upx solid #767676;
			margin-left: 24upx;
		}
		button:after{
			border: none;
		}
		.active{
			border: 3upx solid #ffa71d;
			color: #ffa71d;
		}
	}
</style>
